<!-- 消息信箱-->
<template>
	<view>
		<div class="searchBgc">
			<div class="serachGo">
				<input class="serach-input" type="text" value="" v-model="searchWord"/>
			</div>
			<div class="serachButton" @click="serachButton">
				<image src="../../static/zzp_ss_icon.png" style="width: 45upx;height: 45upx;" mode="scaleToFill"></image>
			</div>
		</div>
		<view class="message-stat">
			<text style="margin-left: 30upx;">{{inter.xxtj}} {{totalMes}} {{inter.tiao}}，{{inter.weidu}} <text style="color: #D04127;"> {{unreadMes}}</text> {{inter.tiao}}</text>
		</view>
		<view style="margin-top: 180upx;">
			<view class="boxFor" v-for="(item, i) in list" :key="i" @tap="goToDetail(item)">
				<view class="box-cell" v-if="item.MsgType==1">
					<view class="cell-left">
						<image  src="../../static/baojing.png" style="width: 45upx;height:45upx;" mode="scaleToFill"></image>
						<text class="bjxx">{{item.MsgTypeName}}</text>
					</view>
					<view class="cell-mid">
						<text class="msgTitle">{{item.Title}}</text>
						<text class="xxTime">{{item.CreateDate}}</text>
					</view>
					<view class="cell-right">
						<view class="red-dot" v-if="item.IsRead!==1"></view>
					</view>
				</view>
				
				<view class="box-cell" v-if="item.MsgType!=1">
					<view class="cell-left">
						<image  src="../../static/tishi.png" style="width: 45upx;height:45upx;" mode="scaleToFill"></image>
						<text class="cgxx">{{item.MsgTypeName}}</text>
					</view>
					<view class="cell-mid">
						<text class="msgTitle">{{item.Title}}</text>
						<text class="xxTime">{{item.CreateDate}}</text>
					</view>
					<view class="cell-right">
						<view class="red-dot" v-if="item.IsRead!==1"></view>
					</view>
				</view>
			</view>		
			<view v-show="!list" class="noMessage">
				<image  src="../../static/noMessage.png" style="width: 144upx;height:144upx;" mode="scaleToFill"></image>
				<text style="color: #89BFFF;font-size: 28upx;margin-top: 34upx;">{{inter.noData}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	
	plus.push.addEventListener('click', function(msg){  
		//处理点击消息的业务逻辑代码 
		uni.setStorage({
			key:'readRefresh',
			data:2
		})
		uni.switchTab({
			url:'/pages/messagebox/messagebox'
		})
		console.log(JSON.stringify(msg)); 
	}, false);
	
	export default {
		components:{
		},
		data(){
			return {
				languageValue:'',
				list:null,
				pageIndex:1,
				totalMes:0,
				unreadMes:0,
				searchWord:''
			}
		},
		onShow(){
			uni.getStorage({
				key:'readRefresh',
				success:(res)=>{
					console.log('是否刷新'+res.data);
					if(res.data==2){
						this.list=[];
						this.pageIndex=1;
						this.getMessageList()
					}
				}
			})
		},
		onLoad() {
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
				}
			})
			uni.setNavigationBarTitle({
				title: this.inter.message
			});
			this.getMessageList()
		},
		methods:{
			getMessageList(){
				let that = this
				uni.showToast({
					title: 'loading',
					icon:'loading',
					mask:true,
				});
				
				$api.getMessageList({
					pageIndex:this.pageIndex,
					pageSize:10,
					KeyWord:this.searchWord
				},res=>{
					console.log(JSON.stringify(res));
					this.totalMes=res.TotalItems;
					this.unreadMes=res.Context;
					if (this.pageIndex==1&&res.Items) {
						this.list=[]
						this.list = res.Items
						// console.log(3333);
					} else {
						if (res.Items) {
							this.list = [...this.list, ...res.Items]
							// console.log(2222);
						}else {
							if(this.pageIndex==1){
								this.list=null
							}
							// console.log(1111);
							setTimeout(function () {
								uni.showToast({
									title: that.inter.noMore,
									icon:"none",
									duration: 3000
								});
							},300)
						}
					}
					//console.log(JSON.stringify(res))
					uni.setStorage({
						key:'readRefresh',
						data:1
					})
					uni.hideToast()
				},err=>{
					uni.showModal({
						content: err.errMsg,
						showCancel: false
					});
					uni.hideToast()
				},e=>{
					uni.stopPullDownRefresh()
				})
			},
			goToDetail(item){
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '../messagebox/msgDetail?data='+data
				});
			},
			serachButton(){
				this.getMessageList()
			}
			
		},
		
		
		onPullDownRefresh(e) {
			this.pageIndex = 1
			this.getMessageList()
		},
		onReachBottom() {
			this.pageIndex++
			// console.log(this.pageIndex);
			this.getMessageList()
		},
		computed:{
			inter(){
				return $inter.message
			}
		}
	}
</script>

<style>
	.searchBgc{
		width: 750upx;
		height: 110upx;
		background-color: #0C9CDC; /* Safari 5.1 - 6.0 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding-top: 15upx;
		position: fixed;
		top: 0upx;
		font-size: 28upx;
	}
	.serachGo{
		width:636upx;
		height: 64upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 8upx;
		background-color: #FFFFFF;
	}
	.serachButton{
		height: 64upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15upx;
	}
	.serach-input{
		width:636upx;
		margin-left: 20upx;
	}
	.message-stat{
		width: 750upx;
		height: 65upx;
		display: flex;
		align-items: center;
		background: #F5F8FF;
		font-size: 28upx;
		position: fixed;
		top: 110upx;
	}
	.box-cell{
		width: 750upx;
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		margin-top: 16upx;
		font-size: 28upx;
	}
	.cell-left{
		width: 105upx;
		height: 110upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.cell-mid{
		width: 580upx;
		height: 110upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.cell-right{
		height: 110upx;
		display: flex;
		align-items: center;
	}
	.boxAlone{
		width: 90vw;
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		font-size: 28upx;
		margin-top: 32upx;
		padding: 14upx 26upx 14upx 26upx ;
	}

	.boxTop{
		width: 100%;
		margin-top: 12upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
	}
	.boxBottom{
		margin-top: 12upx;
		margin-bottom: 14upx;
	}
	.bjxx{
		color: #D04127;
		font-size: 22upx;
	}
	.cgxx{
		color: #4A90E2;
		font-size: 22upx;
	}
	.xxTime{
		color: #9d9d9d;
		margin-top: 4upx;
	}
	.isRead{
		border-left: 5px solid #CCCCCC ;
	}
	.alert{
		border-left: 5px solid #D04127 ;
	}
	.normal{
		border-left: 5px solid #4A90E2 ;
	}
	.msgTitle{
		/* margin-top: 5upx; */
	}
	.rightBlock{
		width: 100%;
	}
	.noMessage{
		width: 750upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 370upx;
	}
	.red-dot{
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #D04127;
	}
</style>
